<template>
	<view class="page">

        <view class='feedback-title'>
            <text>图片(选填,提供问题截图,总大小10M以下)</text>
        </view>
        <view class="feedback-body feedback-uploader">
            <view class="uni-uploader">
                <view class="uni-uploader-head">
                    <view class="uni-uploader-title">点击预览图片</view>
                    <view class="uni-uploader-info">{{imageList.length}}/9</view>
                </view>
                <view class="uni-uploader-body">
                    <view class="uni-uploader__files">
                        <block v-for="(image,index) in imageList" :key="index">
                            <view class="uni-uploader__file" style="position: relative;">
                                <image class="uni-uploader__img" :src="image" @tap="previewImage(index)"></image>
                                <view class="close-view" @click="close(index)">x</view>
                            </view>
                        </block>
                        <view class="uni-uploader__input-box" v-show="imageList.length < 9">
                        	<view class="uni-uploader__input" @tap="chooseImg"></view>
                        </view>
                    </view>
                </view>
            </view>
        </view>
        <button type="default" class="feedback-submit" @tap="send">提交</button>
    </view>
</template>

<script>
	var _that;
    export default {
        data() {
            return {
                imageList: [],
                sendDate: {
                    score: 0,
                    content: "",
                    contact: ""
                }
            }
        },
        onLoad() {
			_that = this;
            let deviceInfo = {
                // appid: plus.runtime.appid,
                // imei: plus.device.imei, //设备标识
                // p: plus.os.name === "Android" ? "a" : "i", //平台类型，i表示iOS平台，a表示Android平台。
                // md: plus.device.model, //设备型号
                // app_version: plus.runtime.version,
                // plus_version: plus.runtime.innerVersion, //基座版本号
                // os: plus.os.version,
                // net: "" + plus.networkinfo.getCurrentType()
            }
            this.sendDate = Object.assign(deviceInfo, this.sendDate);
        },
        methods: {
            close(e){
                this.imageList.splice(e,1);
            },
            chooseImg() { //选择图片
                uni.chooseImage({
                    sourceType: ["camera", "album"],
                    sizeType: "compressed",
                    count: 9 - this.imageList.length,
                    success: (res) => {
						console.log(res)
						let sizeData = res.tempFiles;
						let sizeNum = 0;
						sizeData.map((value, index) => {
						    sizeNum += value.size;
						})
						
						console.log(sizeNum)
						
						if(sizeNum > 1000000){
							uni.showModal({
								content: '文件超过10m,请重新选择',
								showCancel: false
							});
							 _that.imageList = [];
							return;
						}
						
                        this.imageList = this.imageList.concat(res.tempFilePaths);
                    }
                })
				console.log(JSON.stringify(this.imageList))
            },
            previewImage(index) { //预览图片
                uni.previewImage({
                    urls: this.imageList,
					current:this.imageList[index]
                });
            },
            send() { 
				if(!(this.imageList.length>0)){
					uni.showModal({
						content: '请先选择图片',
						showCancel: false
					});
					return;
				}
                console.log(JSON.stringify(this.sendDate));
				
                let imgs = this.imageList.map((value, index) => {
                    return {
                        name:value.substring(value.lastIndexOf("/")),
                        uri: value
                    }
                })
				uni.showLoading({
					title:'上传中请耐心等待'
				})
                uni.uploadFile({
                    url: "http://192.168.0.31:10080/appUpload/upload",
					filePath:'',
					name:'',
                    files: imgs,
                    formData: this.sendDate,
					header:{"Content-Type": "multipart/form-data"},
                    success: (res) => {
						uni.hideLoading()
						console.log(res)
                        if (res.statusCode === 200) {
                            uni.showToast({
                                title: "上传成功!"
                            });
                            this.imageList = [];
                            this.sendDate = {

                            }
                        }
                    },
                    fail: (res) => {
						uni.hideLoading()
                        console.log(res)
						uni.showToast({
						    title: "上传失败!",
							icon:'none'
						});
                    }
                });
            }
        }
    }
</script>

<style>
    page {
        background-color: #EFEFF4;
    }

    .input-view {
        font-size: 28upx;
    }
    .close-view{
        text-align: center;line-height:14px;height: 16px;width: 16px;border-radius: 50%;background: #FF5053;color: #FFFFFF;position: absolute;top: -6px;right: -4px;font-size: 12px;
    }
</style>
